<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-card-body">
            <form class="layui-form" action="" lay-filter="component-form-element">
                <div class="layui-form" lay-filter="layuiadmin-app-form-list" id="layuiadmin-app-form-list">
                    <div class="layui-form-item">
                        <div class="layui-col-sm3 layui-col-md3 layui-col-lg3 layui-col-md-offset1">
                            <label class="layui-form-label">修改标题</label>
                            <div class="layui-input-inline">
                                <input id="input_title" type="text" name="title" lay-verify="required"
                                       placeholder="请输入标题"
                                       autocomplete="off"
                                       class="layui-input">
                            </div>
                        </div>
                        <div class="layui-col-sm3 layui-col-md3 layui-col-lg3">
                            <label class="layui-form-label">文章作者</label>
                            <div class="layui-input-inline">
                                <input id="input_author" type="text" name="author" lay-verify="required"
                                       placeholder="请输入姓名"
                                       autocomplete="off"
                                       class="layui-input">
                            </div>
                        </div>
                        <div class="layui-col-sm3 layui-col-md3 layui-col-lg3">
                            <div class="layui-btn-container layadmin-layer-demo">
                                <button class="layui-btn layui-btn-primary" lay-submit
                                        lay-filter="component-form-element"
                                        id="component-form-element" data-type="test11">修改
                                </button>
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-col-sm3 layui-col-md3 layui-col-lg3 layui-col-md-offset1">
                            <label class="layui-form-label">发布时间</label>
                            <div class="layui-input-inline">
                                <input type="text" class="layui-input" id="test-laydate-type-datetime"
                                       placeholder="直接点击选现在">
                            </div>
                        </div>
                        <div class="layui-col-sm3 layui-col-md3 layui-col-lg3">
                            <label class="layui-form-label">所属分类：</label>
                            <div class="layui-input-inline">
                                <select id="selectId" name="type" lay-verify="required" lay-filter="aihao">
                                    <option value=""></option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-col-sm3 layui-col-md3 layui-col-lg3">
                            <div class="layui-btn-container layadmin-layer-demo">
                                <button class="layui-btn layui-btn-primary" lay-submit
                                        lay-filter="component-form-element"
                                        id="component-form-element" data-type="test11">关闭
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<div class="layui-form-item">
    <label class="layui-form-label"></label>
    <div class="layui-input-inline">
        <textarea id="textarea_id" name="content" style="width:930px;height:600px;"
                  class="layui-textarea"></textarea>
    </div>
</div>


<link rel="stylesheet" href="/static/kindeditor-master/themes/default/default.css">
<script src="/static/kindeditor-master/kindeditor-all.js"></script>
<script src='/static/kindeditor-master/kindeditor-all-min.js'></script>
<script src='/static/kindeditor-master/lang/zh-CN.js'></script>

<script>
    layui.use(['index', 'form', 'laydate'], function () {
        var laydate = layui.laydate;
        var $ = layui.$
            , admin = layui.admin
            , element = layui.element
            , form = layui.form


        // 根据id取值
        var router = layui.router();
        var id = router.search.id;
        console.log(id + '     123')

        $.ajax({
            url: "/detail_article/",
            type: 'post',
            data: {
                id_back: id,
                //
            },
            success: function (res) {
                console.log(res.data)
                console.log(res.data[4])
                console.log(res.data[6][0])
                console.log('dasdasdasda')
                $.each(res.data[6][0], function (index, item) {
                    console.log(new Option(item));
                    console.log(item)   // item是4次循环
                    if (item[1] === res.data[4]) {
                        $('#selectId').append("<option selected>" + item[1] + "</option>");//往下拉菜单里添加元素
                    } else {
                        $('#selectId').append("<option>" + item[1] + "</option>");//往下拉菜单里添加元素
                    }
                })
                form.render('select'); //刷新表单select选择框渲染
                window.editor = KindEditor.create('#textarea_id');
                document.getElementById("input_title").value = res.data[0];
                document.getElementById("input_author").value = res.data[1];
                document.getElementById("test-laydate-type-datetime").value = res.data[3];
                document.getElementById("selectId").innerHTML = res.data[4];
                console.log(res.data[4])
                // $('#selectId').innerHTML= '<option value=""> ' + res.data[4] + ' </option>';
                console.log('111111111')
                editor.html(res.data[5])
            },
        });


        //日期时间选择器
        laydate.render({
            elem: '#test-laydate-type-datetime'
            , type: 'datetime'
            // , format: 'y.MM.dd-HH:mm'
            , format: 'yyyy-MM-dd HH:MM'
            , done: function (date) {
                console.log(date); //得到日期生成的值，如：2022-03-01
            }
        });

        form.render(null, 'component-form-element');
        element.render('breadcrumb', 'breadcrumb');


        //监听提交
        form.on('submit(component-form-element)', function (data) {
            console.log('sdasdsadsadasdasdasd')
            console.log(data)
            console.log(data.field)
            var field = data.field; //获取提交的字段,这里的field输出的是JS格式的内容传到后端
            var html = editor.html(); //监听获取文本编辑器里面的内容
            var publish_time_front = $('#test-laydate-type-datetime').val(); //监听获取发布时间框内的内容
            var classify = $("select[name='selectId']").val();
            console.log(field.title)
            console.log(field.author)
            console.log('iiiii')
            console.log(classify)


            //提交 Ajax 成功后，关闭当前弹层并重载表格
            $.ajax({
                url: "/edit_article/",
                type: 'post',
                datatype: "json",
                data: {
                    article_id: id,
                    field_title_back: field.title,
                    field_author_back: field.author,
                    content_back: html,
                    publish_time_back: publish_time_front,
                    classify_back: classify
                },
                success: function (res) {
                    console.log(res)
                }
            });
        });

        var active = {
            test1: function () {
                layer.confirm('文章已提交', {
                    btn: ['返回文章', '返回目录'] //按钮
                }, function () {
                    window.location.href = "#/cpa/homepage";
                }, function () {
                    window.location.href = "/static/layuiAdmin-master/admin/std/dist/views/app/content/list1.html";
                });
            }
        }

        $('#component-form-element').on('click', function () {
            var type = $(this).data('type');
            active[type] && active[type].call(this);
        })

    })


</script>

<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body">
                    <form class="layui-form" action="" lay-filter="component-form-element">
                        <div class="layui-form-item">
                            <div class="layui-col-sm3 layui-col-md3 layui-col-lg3 layui-col-md-offset1">
                                <label class="layui-form-label">修改标题</label>
                                <div class="layui-input-inline">
                                    <input id="input_title" type="text" name="title" lay-verify="required"
                                           placeholder="请输入标题"
                                           autocomplete="off"
                                           class="layui-input">
                                </div>
                            </div>
                            <div class="layui-col-sm3 layui-col-md3 layui-col-lg3">
                                <label class="layui-form-label">文章作者</label>
                                <div class="layui-input-inline">
                                    <input id="input_author" type="text" name="author" lay-verify="required"
                                           placeholder="请输入姓名"
                                           autocomplete="off"
                                           class="layui-input">
                                </div>
                            </div>
                            <div class="layui-col-sm3 layui-col-md3 layui-col-lg3">
                                <div class="layui-btn-container layadmin-layer-demo">
                                    <button class="layui-btn layui-btn-primary" lay-submit
                                            lay-filter="component-form-element"
                                            id="component-form-element" data-type="test11">修改
                                    </button>
                                </div>
                            </div>
                        </div>
                            <div class="layui-form-item">
                                <div class="layui-col-sm3 layui-col-md3 layui-col-lg3 layui-col-md-offset1">
                                    <label class="layui-form-label">发布时间</label>
                                    <div class="layui-input-inline">
                                        <input type="text" class="layui-input" id="test-laydate-type-datetime"
                                               placeholder="直接点击选现在">
                                    </div>
                                </div>
                                <div class="layui-col-sm3 layui-col-md3 layui-col-lg3">
                                    <label class="layui-form-label">所属分类：</label>
                                    <div class="layui-input-inline">
                                        <select id="selectId" name="type" lay-verify="required" lay-filter="aihao">
                                            <option value=""></option>
                                        </select>
                                    </div>
                                </div>
                                <div class="layui-col-sm3 layui-col-md3 layui-col-lg3">
                                    <div class="layui-btn-container layadmin-layer-demo">
                                        <button class="layui-btn layui-btn-primary" lay-submit
                                                lay-filter="component-form-element"
                                                id="component-form-element" data-type="test11">关闭
                                        </button>
                                    </div>
                                </div>
                            </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="layui-form-item">
    <label class="layui-form-label"></label>
    <div class="layui-input-inline">
        <textarea id="textarea_id" name="content" style="width:930px;height:600px;"
                  class="layui-textarea"></textarea>
    </div>
</div>


<link rel="stylesheet" href="/static/kindeditor-master/themes/default/default.css">
<script src="/static/kindeditor-master/kindeditor-all.js"></script>
<script src='/static/kindeditor-master/kindeditor-all-min.js'></script>
<script src='/static/kindeditor-master/lang/zh-CN.js'></script>

<script>
    layui.use(['index', 'form', 'laydate'], function () {
        var laydate = layui.laydate;
        var $ = layui.$
            , admin = layui.admin
            , element = layui.element
            , form = layui.form

        var router = layui.router();
        var id = router.search.id;
        console.log(id + '     123')

        $.ajax({
            url: "/detail_article/",
            type: 'post',
            data: {
                id_back: id,
                //
            },
            success: function (res) {
                $.each(res.data[6][0], function (index, item) {
                    console.log(new Option(item));
                    console.log(item)   // item是4次循环
                    if (item[1] === res.data[4]) {
                        $('#selectId').append("<option selected>" + item[1] + "</option>");//往下拉菜单里添加元素
                    } else {
                        $('#selectId').append("<option>" + item[1] + "</option>");//往下拉菜单里添加元素
                    }
                })
                form.render('select'); //刷新表单select选择框渲染
                window.editor = KindEditor.create('#textarea_id');
                document.getElementById("input_title").value = res.data[0];
                document.getElementById("input_author").value = res.data[1];
                document.getElementById("test-laydate-type-datetime").value = res.data[3];
                document.getElementById("selectId").innerHTML = res.data[4];
                console.log(res.data[4])
                // $('#selectId').innerHTML= '<option value=""> ' + res.data[4] + ' </option>';
                console.log('111111111')
                editor.html(res.data[5])
            },
        });

        form.render(null, 'component-form-element');
        element.render('breadcrumb', 'breadcrumb');

        form.on('submit(component-form-element)', function (data) {
            layer.msg(JSON.stringify(data.field));
            console.log(data.field)
            return false;
        });
    });
</script>


